#collage hr{border:none;border-top:2px solid #f5f2f2;height:1px;margin: 5px;}
#collage{width:100%;heigth:auto;  }
#collage #playPanel {background-color:#c2defc;margin:auto;width:100%;}
#collage #playPanel h3{font-family: '隶书';text-align: center;}
.ranking{display: inline-block;margin: 10px 10px;width:320px;background-color:white;  }
#collage #actualImageBox {display: inline-block;font-size:1em;margin: 10px 10px;overflow:hidden;vertical-align: top;width:342px; }
#collage img#actualImage{border:2px solid #a46;height:150px;width:150px; float: left }
#collage #imgbox{padding-left: 2px;}
#recored{ float: right; padding-right:30px;padding-top: 30px;  }
#collage #sortable {border:2px solid #a46;list-style-type: none;display: inline-block;margin:  0 auto;padding: 0;width: 352px;  }
#collage #sortable li {background-size: 400% 400%;border: none;cursor: pointer;margin: auto;padding: 0;float: left;width: 88px;height: 88px;}
.imglist ul li{float: left;list-style-type: none; }
.imglist ul li img{width:86px;height:86px;}
/*  table */
#imagetable {font-family: verdana,arial,sans-serif;font-size:11px;color:#333333;border-width: 1px;border-color: #999999;border-collapse: collapse;}
#imagetable td {width:125px;background:#b5cfd2 ;border-width: 1px;padding: 8px;border-style: solid;border-color: #999999;text-align: center;}


@media screen and (min-width: 320px) and (max-width : 360px){
    #collage #sortable {border:2px solid #a46;list-style-type: none;display: inline-block;margin:  0 auto;padding: 0;width: 312px;  }
    #collage #sortable li {background-size: 400% 400%;border: none;cursor: pointer;margin: auto;padding: 0;float: left;width: 78px;height: 78px;}
    #collage #actualImageBox {display: inline-block;font-size:1em;margin: 10px 10px;overflow:hidden;vertical-align: top;width:302px; }
    #recored{ float: right; padding-right:15px;padding-top: 5px; }
    .ranking{display: inline-block;margin: 10px 10px;width:300px;background-color:white;  }
    #imagetable {font-family: verdana,arial,sans-serif;font-size:11px;color:#333333;border-width: 1px;border-color: #999999;border-collapse: collapse;margin:auto;}

}
@media screen and (min-width: 360px) and (max-width : 375px){
    #collage #sortable {border:2px solid #a46;list-style-type: none;display: inline-block;margin:  0 auto;padding: 0;width: 352px;  }
    #collage #sortable li {background-size: 400% 400%;border: none;cursor: pointer;margin: auto;padding: 0;float: left;width: 88px;height: 88px;}
    #collage #actualImageBox {display: inline-block;font-size:1em;margin: 10px 10px;overflow:hidden;vertical-align: top;width:342px; }
    #recored{ float: right; padding-right:15px;padding-top: 15px; }
    .ranking{display: inline-block;margin: 10px 10px;width:340px;background-color:white;  }
    #imagetable {font-family: verdana,arial,sans-serif;font-size:11px;color:#333333;border-width: 1px;border-color: #999999;border-collapse: collapse;margin:auto;}
    #imagetable td {width:145px;background:#b5cfd2 ;border-width: 1px;padding: 8px;border-style: solid;border-color: #999999;text-align: center;}
}
@media screen and (min-width: 375px) and (max-width : 412px){
    #collage #sortable {border:2px solid #a46;list-style-type: none;display: inline-block;margin:  0 auto;padding: 0;width: 364px;  }
    #collage #sortable li {background-size: 400% 400%;border: none;cursor: pointer;margin: auto;padding: 0;float: left;width: 91px;height: 91px;}
    #collage #actualImageBox {display: inline-block;font-size:1em;margin: 10px 10px;overflow:hidden;vertical-align: top;width:354px; }
    #recored{ float: right; padding-right:30px;padding-top: 15px; }
    .ranking{display: inline-block;margin: 10px 10px;width:355px;background-color:white;  }
    #imagetable {font-family: verdana,arial,sans-serif;font-size:11px;color:#333333;border-width: 1px;border-color: #999999;border-collapse: collapse;margin:auto;}
    #imagetable td {width:148px;background:#b5cfd2 ;border-width: 1px;padding: 8px;border-style: solid;border-color: #999999;text-align: center;}

}
@media screen and (min-width: 412px) and (max-width : 479px){
    #collage #sortable {border:2px solid #a46;list-style-type: none;display: inline-block;margin:  0 auto;padding: 0;width: 404px;  }
    #collage #sortable li {background-size: 400% 400%;border: none;cursor: pointer;margin: auto;padding: 0;float: left;width: 101px;height: 101px;}
    #collage #actualImageBox {display: inline-block;font-size:1em;margin: 10px 10px;overflow:hidden;vertical-align: top;width:394px; }
    #collage img#actualImage{border:2px solid #a46;height:165px;width:165px; float: left }
    #recored{ float: right; padding-right:30px;padding-top: 15px; }
    .ranking{display: inline-block;margin: 10px 10px;width:392px;background-color:white;  }
    #imagetable {font-family: verdana,arial,sans-serif;font-size:11px;color:#333333;border-width: 1px;border-color: #999999;border-collapse: collapse;margin:auto;}
    #imagetable td {width:160px;background:#b5cfd2 ;border-width: 1px;padding: 8px;border-style: solid;border-color: #999999;text-align: center;}
}


